<template>
	<div class="header_box" :style="{background: sysTheme.theme_color}">
		<div class="h_left">
			<div class="logo_view">
				<div class="logo" :class="{logo_collapse_style:isCollapse}">
					<h1 v-if="isCollapse">mall</h1>
					<h1 v-else>my mall system</h1>
				</div>
			</div>
			<div class="btn" @click="unfoldFN">
				<i class="el-icon-s-unfold" v-if="isCollapse"></i>
				<i class="el-icon-s-fold" v-else></i>
			</div>
		</div>

		<div class="h_center">
			<div ref="menus_box" class="menus_box">
				<ul ref="menus_ul" class="menus">
					<li ref="menus_li" v-for="(item, index) in routerArr" :class="{action: activeIndex==index}" @click="menusClick(item, index)">
						<i class="iconfont" :class="item.icon"></i>
						<span>{{ item.meta.title }}</span>
					</li>
				</ul>
			</div>
		</div>

		<div class="h_right">
			<section>
				<el-avatar :size="40" :src="avatar"></el-avatar>
			</section>
			<section>
				<el-dropdown trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						<i>超级管理员</i>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-collapse-transition>
						<el-dropdown-menu trigger="click" slot="dropdown">
							<el-dropdown-item command="setting">设置</el-dropdown-item>
							<el-dropdown-item command="b">消息</el-dropdown-item>
							<el-dropdown-item command="exit">{{$t('logout')}}</el-dropdown-item>
						</el-dropdown-menu>
					</el-collapse-transition>
				</el-dropdown>
			</section>
		</div>
	</div>
</template>
<script>
	import { routerArr } from '@/router/index';
	import BScroll from 'better-scroll';

	export default {
		data() {
			return {
				avatar: require("@/assets/img/public/portraits.jpg"),
				sizeList: ["large", "medium", "small"],
				show3: true,
				isCollapse: false, //是否折叠

				activeIndex: 0,
				routerArr: [],
				sysTheme: this.$sysTheme(),
				BSscroll: null,
			};
		},
		computed: {},
		created() {

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.routerArr = routerArr;
				if(this.routerArr && this.routerArr.length) {
					this.routerArr.forEach((x, indexX) => {
						x.children.forEach((y, indexY) => {
							if(y.path == this.$route.path) {
								setTimeout(() => this.$bus.$emit('menu', this.routerArr[indexX]), 200);
								this.activeIndex = indexX;
							}
						})
					})
				};
				this.$bus.$on('changeTheme', () => {
					this.setThemeColor();
				});

				this.initScroll();
			},
			initScroll() {
				let options = {
					startX: 0,
					startY: 0,
					scrollX: true,
					scrollY: false,
					click: true,
					momentum: true, //当快速滑动时是否开启滑动惯性
					bounce: true, //是否启用回弹动画效果
					direction: 'horizontal',
					probeType: 2, //滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
				}
				let lis = this.$refs.menus_li || [];
				let _width = 0;
				for(let item of lis) {
					_width = _width + (item.getBoundingClientRect().width + 20); //宽度加上margin的值
				}
				this.$refs.menus_ul.style.width = Math.ceil(_width) + "px"; //父元素的宽度 = 子元素的宽度相加的和
				this.BSscroll = new BScroll('.menus_box', options);
				this.BSscroll.on('scroll', (pos) => {
					//console.log(pos)
				});
			},
			setThemeColor() {
				this.sysTheme = JSON.parse(localStorage.getItem('sysTheme'));
			},
			unfoldFN() {
				this.isCollapse = !this.isCollapse;
				this.$bus.$emit('isCollapse', this.isCollapse);
			},
			handleCommand(m) {
				if(m == 'setting') {
					this.$router.push({
						name: 'setting'
					})
				} else if(m == 'exit') {
					this.$confirm('确定退出登录吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						localStorage.removeItem('token');
						this.$router.push({
							path: '/login'
						})

					}).catch();
				} else {

				}

			},
			menusClick(item, index) {
				if(this.activeIndex == index) return;
				this.activeIndex = index;
				this.$bus.$emit('menu', this.routerArr[index]);

				let lis = this.$refs.menus_li || [];
				this.BSscroll.scrollToElement(lis[index], 200, true, true);
				this.BSscroll.refresh();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '~assets/css/mixin';
	.header_box {
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.h_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.logo_view {
			.logo {
				width: 180px;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all 0.5s;
				background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
				color: transparent;
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
				background-size: 200% 100%;
				animation: masked-animation 4s infinite linear;
				h1 {
					color: #fff;
					font-size: 20px;
					white-space: nowrap;
					font-style: italic;
					font-weight: bold;
				}
			}
			.logo_collapse_style {
				width: 60px;
				overflow: hidden;
			}
			@keyframes masked-animation {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: -100% 0;
				}
			}
		}
		.btn {
			width: 60px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			i {
				color: #fff;
				font-size: 20px;
			}
			&:hover {
				background: rgba(255, 255, 255, 0.1);
			}
		}
	}
	
	.h_center {
		height: 100%;
		flex: 1;
		margin: 0 10px;
		overflow: hidden;
		.menus_box {
			height: 100%;
			display: flex;
			justify-content: flex-start;
			.menus {
				display: flex;
				justify-content: flex-start;
				li {
					padding: 0 12px;
					height: 100%;
					display: flex;
					align-items: center;
					position: relative;
					&:hover {
						cursor: pointer;
						background: rgba(255, 255, 255, 0.1);
					}
					i {
						font-size: 18px;
						color: #fff;
						margin: 0 4px 0 0;
					}
					span {
						font-size: 16px;
						color: #fff;
						font-weight: bold;
						white-space: nowrap;
					}
				}
				.action {
					&:after {
						width: 100%;
						height: 2px;
						background: #fff;
						content: '';
						position: absolute;
						bottom: 2px;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	
	.h_right {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		section {
			padding: 0 5px;
			i {
				color: #fff;
				cursor: pointer;
			}
		}
	}
</style>